<template>
	<view>
		<u-navbar title="商品" :autoBack="true" :placeholder="true">
			<view class="u-nav-slot" slot="right">
				<text class="iconfont icon-xiaoxi"></text>
			</view>
		</u-navbar>
		<!-- 切换 -->
		<view class="menu">
			<view class="menu_item">
				<text :class="index==1?'act':''">综合</text>
			</view>
			<view class="menu_item">
				<text :class="index==2?'act':''">价格</text>
			</view>
			<view class="menu_item">
				<text :class="index==3?'act':''">销量</text>
			</view>
			<view class="menu_item" @click="change_cut">
				<text :class="cut?'act':''" class="iconfont icon-yunhangshi-qiehuanbanben"></text>
			</view>
		</view>

		<!-- 商品 -->
		<view :class="{goods_list:!cut,act_list:cut}">
			<view :class="{goods_item:!cut,act_item:cut}" v-for="(item,index) in list" @click="to_detail(item.id)">
				<image :src="item.imgUrl[0].url" mode=""></image>
				<view :class="{item_right:!cut,act_right:cut}">
					<text class="title">{{item.title}}</text>
					<view :class="{main:!cut,act_main:cut}">
						<text class="brand">品牌:{{item.brand}}</text>
						<text class="origin">产地:{{item.origin}}</text>
					</view>
					<view :class="{footer:!cut,act_footer:cut}">
						<text class="price">价格:{{item.price}}</text>
						<text class="cart iconfont icon-ic_jiarugouwuche"></text>
					</view>
				</view>
			</view>
	

		</view>
		<view class="list-status">
			<view v-show="loading==='more'" class="item">
				上拉加载更多。。。
			</view>
			<view v-show="loading==='nomore'" class="item">
				没有更多了。。。
			</view>
			<view v-show="loading==='loading'" class="item">
				正在加载中。。。
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	import {
		get_goods_all
	} from "@/api/shop.js"

	export default {
		data() {
			return {
				list: [],
				cut: true,
				index: 1,
				pageNum: 1,
				pageSize: 5,
				loading: 'more' //more还有更多  nomore 没有更多了  loading 正在加载中
			}
		},
		onLoad() {
			this.getAllGoods()
		},
		methods: {
			to_detail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/detail/detail?id=' + id
				})
			},

			change_cut() {
				this.cut = !this.cut
			},
			getAllGoods() {
				this.loading='loading'
				let {
					pageNum,
					pageSize
				} = this
				get_goods_all({
					pageNum,
					pageSize
				}).then(res => {
					this.list.push(...res.data)
					if(res.data.length<this.pageSize){
						this.loading = 'nomore'
						// 加载完毕
					}else{
						this.loading='more'
						this.pageNum++
					}
				})
			}
		},
		onReachBottom() {
			if(this.loading=='loading'||this.loading=='nomore'){
				return
			}else{
				this.getAllGoods()
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-nav-slot {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 14px;

		text:nth-child(2) {
			font-size: 8px;
		}

		.iconfont {
			font-size: 16px;
		}
	}

	.list-status {
		width: 750rpx;
		text-align: center;
		color: #000;
		font-size: 8px;
	}

	.menu {
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		padding: 20rpx 0;
		font-family: '仓耳渔阳体';
		font-size: 14px;
	}

	.goods_list {
		width: 750rpx;

		.goods_item {
			border-bottom: 1px solid #ccc;
			padding: 26rpx;
			width: 100%;
			display: flex;
			box-sizing: border-box;

			image {
				width: 35%;
				height: 200rpx;
			}

			.item_right {
				width: 65%;
				display: flex;
				justify-content: space-between;
				// align-items: center;
				flex-direction: column;

				.title {
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 16px;
					font-family: '仓耳渔阳体';
				}

				.main {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: row;
				}

				.footer {
					width: 70%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: row;

					.cart {
						color: #3DA7FB;
						font-size: 18px;
					}
				}
			}
		}
	}


	// 竖图
	.act_list {
		width: 750rpx;
		padding: 26rpx 0;
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		// justify-content: space-around;
		.act_item {
			text-align: center;
			margin: 18rpx;
			margin-bottom: 120rpx;
			width: 45%;

			image {
				width: 90%;
				height: 250rpx;
			}

			.act_right {
				height: 150rpx;

				.title {
					overflow: hidden;
					-webkit-line-clamp: 2;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					font-size: 16px;
					font-family: '仓耳渔阳体';
				}

				.act_main {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 14px;
				}

				.act_footer {
					width: 90%;
					// height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.cart {
						color: #3DA7FB;
						font-size: 18px;
					}

					// font-size: 14px;
				}
			}
		}

	}



	.act {
		color: #3DA7FB;
	}
</style>
